<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>图片预加载-无序加载</title>
  <style>
    html, body {
      height: 100%;
    }
    a {
      text-decoration: none;
    }
    .box {
      text-align: center;
    }
    .btn {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      border: 1px solid #ccc;
      background-color: #fff;
      padding: 0 10px;
      margin-right: 50px;
      color: #333;
    }
    .btn:hover {
      background-color: #eee;
    }
    .loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #eee;
      text-align: center;
      font-size: 30px;
    }
    .progress {
      margin-top: 300px;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" id="img" width="1200" />
    <p>
      <a href="javascript:;" class="btn" data-control="prev">上一页</a>
      <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
  </div>
  <div class="loading">
    <p class="progress">
      0%
    </p>
  </div>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/preload.js"></script>
  <script>
    var imgs = [
      'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
      'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',
      'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',
      'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'
    ];
    var index = 0,
        len = imgs.length,
        $progress = $('.progress');
    $('.btn').on('click', function() {
      if ($(this).data('control') === 'prev') {
        index = Math.max(0, --index);
      } else {
        index = Math.min(len - 1, ++index);
      }
      document.title = (index + 1) + '/' + len;
      $('#img').attr('src', imgs[index]);
    });
    $.preload(imgs,{
      each: function(count) {
        $progress.html(Math.round((count + 1) / len * 100) + '%');
      },
      all: function() {
        $('.loading').hide();
        document.title = '1/' + len;
      }
    })
  </script>
</body>
</html>
